<title>轮播图</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">轮播图</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">轮播图</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Basic Carousel start -->
<section id="basic-carousel">	
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Example</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-6 col-md-12 border-right-blue-grey border-right-lighten-5">
								<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
									<ol class="carousel-indicators">
										<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
										<li data-target="#carousel-example-generic" data-slide-to="1"></li>
										<li data-target="#carousel-example-generic" data-slide-to="2"></li>
									</ol>
									<div class="carousel-inner" role="listbox">
										<div class="carousel-item active">
											<img src="assets/images/carousel/02.jpg" alt="First slide">
										</div>
										<div class="carousel-item">
											<img src="assets/images/carousel/03.jpg" alt="Second slide">
										</div>
										<div class="carousel-item">
											<img src="assets/images/carousel/01.jpg" alt="Third slide">
										</div>
									</div>
									<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
										<span class="carousel-control-prev-icon" aria-hidden="true"></span>
										<span class="sr-only">Previous</span>
									</a>
									<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
										<span class="carousel-control-next-icon" aria-hidden="true"></span>
										<span class="sr-only">Next</span>
									</a>
								</div>
							</div>
							<div class="col-lg-6 col-md-12">
								<pre class="language-markup">
											<code class="language-markup">
													&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
															&lt;ol class="carousel-indicators"&gt;
																&lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
																&lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
																&lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
															&lt;/ol&gt;
															&lt;div class="carousel-inner" role="listbox"&gt;
																&lt;div class="carousel-item active"&gt;
																	&lt;img src="..." alt="First slide"&gt;
																&lt;/div&gt;
																&lt;div class="carousel-item"&gt;
																	&lt;img src="..." alt="Second slide"&gt;
																&lt;/div&gt;
																&lt;div class="carousel-item"&gt;
																	&lt;img src="..." alt="Third slide"&gt;
																&lt;/div&gt;
															&lt;/div&gt;
															&lt;a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
																&lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
																&lt;span class="sr-only"&gt;Previous&lt;/span&gt;
															&lt;/a&gt;
															&lt;a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"&gt;
																&lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
																&lt;span class="sr-only"&gt;Next&lt;/span&gt;
															&lt;/a&gt;
														&lt;/div&gt;
											</code>
											</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</section>
<!-- Basic Carousel end -->



<!-- Carousel Options start -->
<section id="carousel-options">
	<div class="row">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Interval Option</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</p>
						<div id="carousel-interval" class="carousel slide" data-ride="carousel" data-interval="5000">
							<ol class="carousel-indicators">
								<li data-target="#carousel-interval" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-interval" data-slide-to="1"></li>
								<li data-target="#carousel-interval" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner" role="listbox">
								<div class="carousel-item active">
									<img src="assets/images/carousel/10.jpg" class="d-block w-100" alt="First slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/15.jpg" class="d-block w-100" alt="Second slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/14.jpg" class="d-block w-100" alt="Third slide">
								</div>
							</div>
							<a class="carousel-control-prev" href="#carousel-interval" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel-interval" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pause Option</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>If set to
							<code>"hover"</code>, pauses the cycling of the carousel on
							<code>mouseenter</code> and resumes the cycling of the carousel on
							<code>mouseleave</code>. If set to
							<code>null</code>, hovering over the carousel won't pause it.</p>
						<div id="carousel-pause" class="carousel slide" data-ride="carousel" data-pause="">
							<ol class="carousel-indicators">
								<li data-target="#carousel-pause" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-pause" data-slide-to="1"></li>
								<li data-target="#carousel-pause" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner" role="listbox">
								<div class="carousel-item active">
									<img src="assets/images/carousel/03.jpg" class="d-block w-100" alt="First slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/09.jpg" class="d-block w-100" alt="Second slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/07.jpg" class="d-block w-100" alt="Third slide">
								</div>
							</div>
							<a class="carousel-control-prev" href="#carousel-pause" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel-pause" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Carousel Options</h4>
			<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
				<code>data-</code>, as in
				<code>data-interval=""</code>.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Optional captions</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Add captions to your slides easily with the <code> .carousel-caption</code> element within any <code> .carousel-item.</code> </p>
						<div id="carousel-example-caption" class="carousel slide" data-ride="carousel">
							<ol class="carousel-indicators">
								<li data-target="#carousel-example-caption" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-example-caption" data-slide-to="1"></li>
								<li data-target="#carousel-example-caption" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner" role="listbox">
								<div class="carousel-item active">
									<img src="assets/images/carousel/06.jpg" class="d-block w-100" alt="First slide">
									<div class="carousel-caption">
										<h3>First Slide Label</h3>
										<p>Donut jujubes I love topping I love sweet.</p>
									</div>
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/08.jpg" class="d-block w-100" alt="Second slide">
									<div class="carousel-caption">
										<h3>Second Slide Label</h3>
										<p>Tart macaroon marzipan</p>
									</div>
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/05.jpg" class="d-block w-100" alt="Third slide">
									<div class="carousel-caption">
										<h3>Third Slide Label</h3>
										<p>Pudding sweet pie gummies</p>
									</div>
								</div>
							</div>
							<a class="carousel-control-prev" href="#carousel-example-caption" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel-example-caption" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Wrap Option</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Whether the carousel should cycle continuously or have hard stops. Default: true</p>
						<div id="carousel-wrap" class="carousel slide" data-ride="carousel" data-wrap="false">
							<ol class="carousel-indicators">
								<li data-target="#carousel-wrap" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-wrap" data-slide-to="1"></li>
								<li data-target="#carousel-wrap" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner" role="listbox">
								<div class="carousel-item active">
									<img src="assets/images/carousel/02.jpg" class="d-block w-100" alt="First slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/04.jpg" class="d-block w-100" alt="Second slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/08.jpg" class="d-block w-100" alt="Third slide">
								</div>
							</div>
							<a class="carousel-control-prev" href="#carousel-wrap" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel-wrap" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Keyboard Option</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Whether the carousel should react to keyboard events. Default: true</p>
						<div id="carousel-keyboard" class="carousel slide" data-ride="carousel" data-keyboard="false">
							<ol class="carousel-indicators">
								<li data-target="#carousel-keyboard" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-keyboard" data-slide-to="1"></li>
								<li data-target="#carousel-keyboard" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner" role="listbox">
								<div class="carousel-item active">
									<img src="assets/images/carousel/11.jpg" class="d-block w-100" alt="First slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/06.jpg" class="d-block w-100" alt="Second slide">
								</div>
								<div class="carousel-item">
									<img src="assets/images/carousel/01.jpg" class="d-block w-100" alt="Third slide">
								</div>
							</div>
							<a class="carousel-control-prev" href="#carousel-keyboard" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel-keyboard" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Carousel Options end -->
</div>
